<script setup>
import BaseLargeTitle from '../BaseLargeTitle.vue';

const props = defineProps({
  name: String,
  phone: String,
  email: String,
  address: String,
  positionName: String,
  department: String,
  hireDate: String,
  hideModal: Function,
});
</script>

<template>
  <div class="fixed z-20 top-1/2 left-1/2 -translate-x-2/4 -translate-y-2/4">
    <div
      class="w-modal-width relative rounded-2xl shadow-default p-6 m-auto bg-white"
    >
      <div class="flex justify-between items-center">
        <BaseLargeTitle>{{ name }}</BaseLargeTitle>
        <button class="w-5 h-5 cursor-pointer hover:scale-110 transition-transform" @click="hideModal">
          <img src="../Modal/icon.svg" alt="close-icon" />
        </button>
      </div>

      <div class="grid gap-y-3.5 gap-x-10 grid-rows-modal-grid-row grid-cols-modal-grid-cols my-10">
        <p class="text-modal-p-size">Телефон:</p>
        <p class="text-base text-text-secondary">{{ phone }}</p>
        <p class="text-modal-p-size">Почта:</p>
        <p class="text-base text-text-secondary">{{ email }}</p>
        <p class="text-modal-p-size">Дата приема:</p>
        <p class="text-base text-text-secondary">{{ hireDate }}</p>
        <p class="text-modal-p-size">Должность:</p>
        <p class="text-base text-text-secondary">{{ positionName }}</p>
        <p class="text-modal-p-size">Подразделение:</p>
        <p class="text-modal-secondary-p-size text-text-secondary">
          {{ department }}
        </p>
      </div>

      <div class="flex flex-col gap-3">
        <p class="text-modal-p-size">Дополнительная информация:</p>
        <p class="text-modal-secondary-p-size text-text-secondary">
          {{ address }}
        </p>
      </div>
    </div>
  </div>
</template>
